<template>
  <transition :name="slide">
    <router-view class="absolute left-0 right-0" />
  </transition>
</template>

<script>
// 转场动画
export default {
  data () {
    return {
      slide: ''
    }
  },
  watch: {
    '$route' (to, from) {
      if (to.meta.zIndex > from.meta.zIndex) {
        this.slide = 'slide-left'
      } else if (to.meta.zIndex < from.meta.zIndex) {
        this.slide = 'slide-right'
      } else {
        this.slide = null
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.slide-right-enter-active, .slide-right-leave-active,
.slide-left-enter-active, .slide-left-leave-active {
  will-change: transform;
  transition: all .3s ease;
  position: absolute;
}
.slide-left-leave-active, .slide-right-enter {
  transform: translateX(-30%);
  opacity: 0;
}
.slide-right-leave-active, .slide-left-enter {
  transform: translateX(100%);
}
</style>
